
<template>
  <view class="designer-list-page">
    <!-- 筛选区域 - 放在一行 -->
    <view class="filter-section">
      <view class="filter-row">
        <text class="filter-label">服务类型</text>
        <picker @change="onServiceTypeChange" :value="selectedServiceType" :range="serviceTypes">
          <view class="picker-item">{{ serviceTypes[selectedServiceType] }}</view>
        </picker>
        <text class="filter-label">从业年限</text>
        <picker @change="onExperienceChange" :value="selectedExperience" :range="experienceOptions">
          <view class="picker-item">{{ experienceOptions[selectedExperience] }}</view>
        </picker>
        <text class="filter-label">擅长风格</text>
        <picker @change="onStyleChange" :value="selectedStyle" :range="styleOptions">
          <view class="picker-item">{{ styleOptions[selectedStyle] }}</view>
        </picker>
      </view>
    </view>

    <!-- 设计师列表 -->
    <scroll-view class="designer-list" scroll-y="true">
      <view v-for="(designer, index) in filteredDesigners" :key="index" class="designer-item">
        <!-- 头部信息 -->
        <view class="designer-header">
          <image :src="designer.avatar" class="avatar"></image>
          <view class="designer-info">
            <view class="name-section">
              <text class="designer-name">{{ designer.name }}</text>
              <text v-if="designer.isTop" class="top-badge">首席设计师</text>
            </view>
            <view class="rating-section">
              <text class="rating">{{ designer.rating }}分</text>
              <text class="store-name">{{ designer.storeName }}</text>
            </view>
            <view class="stats">
              <text class="good-count">{{ designer.goodCount }}人预约过</text>
            </view>
          </view>
          <button class="book-button" @tap="designerDetail(designer.id)" style="margin-right: 20rpx">介绍</button>
          <button class="book-button" @tap="bookDesigner(designer.id)">预约</button>
        </view>

        <!-- 擅长风格 -->
        <view class="styles-section">
          <view v-for="(style, index) in designer.styles" :key="index" class="style-tag">
            {{ style }}
          </view>
        </view>

        <!-- 作品展示 -->
        <view class="works-section">
          <view v-for="(work, index) in designer.works" :key="index" class="work-item">
            <image :src="work.image" class="work-image" mode="aspectFill" @tap="openImageGallery(index, designer.works)"></image>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 全屏图片画廊弹窗 -->
    <view v-if="showGallery" class="gallery-overlay" @tap="closeGallery">
      <view class="gallery-container" @tap.stop.prevent>
        <!-- 全屏图片容器 -->
        <view class="gallery-fullscreen"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd">
          <image
              :src="currentImage"
              class="gallery-image"
              :style="imageStyle"
              mode="aspectFit"
              @tap.stop.prevent="handleImageTap"
          ></image>
        </view>

        <!-- 顶部信息栏 -->
        <view class="gallery-header">
          <text class="gallery-index">{{ currentImageIndex + 1 }}/{{ worksList.length }}</text>
          <view class="gallery-actions">
            <text class="gallery-action" @tap="resetTransform">重置</text>
            <text class="gallery-close" @tap="closeGallery">✕</text>
          </view>
        </view>

        <!-- 底部指示器 -->
        <view class="gallery-footer">
          <view class="gallery-dots">
            <view
                v-for="(image, index) in worksList"
                :key="index"
                class="gallery-dot"
                :class="{ active: currentImageIndex === index }"
                @tap="switchImage(index)"
            ></view>
          </view>
        </view>

        <!-- 左右切换箭头 -->
        <view v-if="worksList.length > 1" class="gallery-arrows">
          <text class="gallery-arrow gallery-arrow-left" @tap="prevImage" :class="{ disabled: currentImageIndex === 0 }">‹</text>
          <text class="gallery-arrow gallery-arrow-right" @tap="nextImage" :class="{ disabled: currentImageIndex === worksList.length - 1 }">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">.designer-list-page {
  background-color: #f8f9fa;
  height: 100vh;
}

.filter-section {
  background-color: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  flex-wrap: wrap;
}

.filter-label{
  font-size: 24rpx;
  color: #000;
}

.picker-item {
  font-size: 24rpx;
  color: #666;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  text-align: center;
}

.designer-list {
  height: calc(100vh - 200rpx);
}

.designer-item {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.designer-header {
  display: flex;
  padding: 30rpx;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.designer-info {
  flex: 1;
  overflow: hidden;
}

.name-section {
  display: flex;
  align-items: center;
}

.designer-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.top-badge {
  font-size: 24rpx;
  color: #ff4d4f;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  background-color: #fff;
  border: 1rpx solid #ff4d4f;
}

.rating-section {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.rating {
  font-size: 24rpx;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 10rpx;
}

.store-name {
  font-size: 24rpx;
  color: #666;
}

.stats {
  font-size: 24rpx;
  color: #996;
}

.book-button {
  width: 120rpx;
  height: 60rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: bold;
  border: none;
}

.styles-section {
  padding: 20rpx 30rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.style-tag {
  font-size: 24rpx;
  color: #666;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
}

.works-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  padding: 20rpx;
}

.work-item {
  width: 100%;
  height: 120rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片画廊样式 */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.gallery-fullscreen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.gallery-image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.1s ease-out;
  will-change: transform;
  position: absolute;
}

.gallery-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40rpx 30rpx 20rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.gallery-index {
  font-size: 32rpx;
  font-weight: 500;
}

.gallery-actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.gallery-action {
  font-size: 28rpx;
  color: white;
  padding: 12rpx 20rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 20rpx;
}

.gallery-close {
  font-size: 44rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.gallery-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 40rpx;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 16rpx;
}

.gallery-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.3s ease;

  &.active {
    background: #fff;
    transform: scale(1.2);
  }
}

.gallery-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 2;
}

.gallery-arrow {
  font-size: 60rpx;
  color: white;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: all 0.3s ease;

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  &:active {
    background: rgba(255,255,255,0.4);
  }
}
</style>

<script>export default {
  name: "designer",
  data() {
    return {
      // 服务类型选项
      serviceTypes: ['全部', '室内设计', '软装设计', '空间规划'],
      selectedServiceType: 0,

      // 从业年限选项
      experienceOptions: ['全部', '1-3年', '3-5年', '5-10年', '10年以上'],
      selectedExperience: 0,

      // 擅长风格选项
      styleOptions: ['全部', '现代', '简约', '美式', '北欧', '新古典', '中式', '田园', '日式', '地中海', '东南亚'],
      selectedStyle: 0,

      // 设计师数据
      designers: [
        {
          id: 1,
          avatar: '/static/icon/用户.png',
          name: '张卫',
          isTop: false,
          rating: 4.79,
          storeName: '上海闵行店',
          goodCount: 488,
          styles: ['现代', '简约', '美式', '北欧', '新古典'],
          works: [
            { image: '/static/show/show1.png' },
            { image: '/static/show/show2.png' },
            { image: '/static/show/show1.png' }
          ]
        },
        {
          id: 2,
          avatar: '/static/icon/用户.png',
          name: '李全凤',
          isTop: false,
          rating: 4.78,
          storeName: '上海闵行店',
          goodCount: 637,
          styles: ['欧式', '中式', '现代', '简约', '美式', '田园', '北欧', '日式', '新古典', '地中海', '东南亚'],
          works: [
            { image: '/static/show/show1.png' },
            { image: '/static/show/show2.png' },
            { image: '/static/show/show1.png' }
          ]
        },
        {
          id: 3,
          avatar: '/static/icon/用户.png',
          name: '王晓君',
          isTop: true,
          rating: 4.77,
          storeName: '上海普陀店',
          goodCount: 577,
          styles: ['欧式', '中式', '现代', '简约', '美式', '田园', '北欧', '日式', '新古典', '地中海', '东南亚'],
          works: [
            { image: '/static/show/show1.png' },
            { image: '/static/show/show2.png' },
            { image: '/static/show/show1.png' }
          ]
        }
      ],

      // 过滤后的设计师列表
      filteredDesigners: [],

      // 图片画廊相关数据
      showGallery: false,
      currentImageIndex: 0,
      worksList: [],
      scale: 1,
      lastScale: 1,
      translateX: 0,
      translateY: 0,
      lastTranslateX: 0,
      lastTranslateY: 0,
      startX: 0,
      startY: 0,
      isDragging: false,
      isScaling: false,
      initialDistance: 0,
      lastTouchTime: 0
    };
  },
  onLoad() {
    this.filterDesigners();
  },
  methods: {
    // 服务类型变更
    onServiceTypeChange(e) {
      this.selectedServiceType = e.detail.value;
      this.filterDesigners();
    },

    // 从业年限变更
    onExperienceChange(e) {
      this.selectedExperience = e.detail.value;
      this.filterDesigners();
    },

    // 擅长风格变更
    onStyleChange(e) {
      this.selectedStyle = e.detail.value;
      this.filterDesigners();
    },

    // 过滤设计师
    filterDesigners() {
      let result = this.designers;

      // 根据服务类型过滤
      if (this.selectedServiceType !== 0) {
        result = result.filter(designer => designer.serviceType === this.serviceTypes[this.selectedServiceType]);
      }

      // 根据从业年限过滤
      if (this.selectedExperience !== 0) {
        const experienceRange = this.experienceOptions[this.selectedExperience].split('-');
        const minYears = parseInt(experienceRange[0]);
        const maxYears = experienceRange.length > 1 ? parseInt(experienceRange[1]) : 999;

        result = result.filter(designer => {
          const years = designer.experience;
          return years >= minYears && years <= maxYears;
        });
      }

      // 根据擅长风格过滤
      if (this.selectedStyle !== 0) {
        const style = this.styleOptions[this.selectedStyle];
        result = result.filter(designer => designer.styles.includes(style));
      }

      this.filteredDesigners = result;
    },

    // 预约设计师
    bookDesigner(id) {
      uni.navigateTo({
        url: `/pages/staff/designer_contract?id=${id}`
      });
    },
    // 预约设计师
    designerDetail(id) {
      uni.navigateTo({
        url: `/pages/staff/designer_detail?id=${id}`
      });
    },


    // 打开图片画廊
    openImageGallery(index, images) {
      this.worksList = images;
      this.currentImageIndex = index;
      this.showGallery = true;
      this.resetTransform();
    },

    // 关闭图片画廊
    closeGallery() {
      this.showGallery = false;
      this.resetTransform();
    },

    // 上一张图片
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
        this.resetTransform();
      }
    },

    // 下一张图片
    nextImage() {
      if (this.currentImageIndex < this.worksList.length - 1) {
        this.currentImageIndex++;
        this.resetTransform();
      }
    },

    // 切换到指定图片
    switchImage(index) {
      this.currentImageIndex = index;
      this.resetTransform();
    },

    // 重置变换
    resetTransform() {
      this.scale = 1;
      this.lastScale = 1;
      this.translateX = 0;
      this.translateY = 0;
      this.lastTranslateX = 0;
      this.lastTranslateY = 0;
      this.isDragging = false;
      this.isScaling = false;
    },

    // 双击处理
    handleImageTap(e) {
      const currentTime = new Date().getTime();
      const timeDiff = currentTime - this.lastTouchTime;

      // 双击检测 (300ms内连续点击)
      if (timeDiff < 300) {
        if (this.scale === 1) {
          // 双击放大到2倍
          this.scale = 2;
          this.lastScale = 2;
        } else {
          // 双击恢复原始大小
          this.resetTransform();
        }
      }

      this.lastTouchTime = currentTime;
    },

    // 触摸开始
    handleTouchStart(e) {
      if (e.touches.length === 1) {
        // 单指触摸 - 拖拽
        this.startX = e.touches[0].clientX;
        this.startY = e.touches[0].clientY;
        this.isDragging = true;

        // 记录开始拖拽时的位置
        this.lastTranslateX = this.translateX;
        this.lastTranslateY = this.translateY;

      } else if (e.touches.length === 2) {
        // 双指触摸 - 缩放
        this.isScaling = true;
        this.handlePinchStart(e);
      }
    },

    // 触摸移动
    handleTouchMove(e) {
      if (e.touches.length === 1 && this.isDragging) {
        // 单指移动 - 拖拽
        const currentX = e.touches[0].clientX;
        const currentY = e.touches[0].clientY;
        const deltaX = currentX - this.startX;
        const deltaY = currentY - this.startY;

        // 只有在缩放状态下才允许拖拽
        if (this.scale > 1) {
          this.translateX = this.lastTranslateX + deltaX;
          this.translateY = this.lastTranslateY + deltaY;

          // 限制拖拽范围，防止图片被拖出可视区域
          this.limitTranslation();
        }
      } else if (e.touches.length === 2 && this.isScaling) {
        // 双指移动 - 缩放
        this.handlePinchMove(e);
      }
    },

    // 触摸结束
    handleTouchEnd(e) {
      if (e.changedTouches.length === 1 && this.isDragging) {
        const endX = e.changedTouches[0].clientX;
        const endY = e.changedTouches[0].clientY;
        const deltaX = endX - this.startX;
        const deltaY = endY - this.startY;

        // 如果是在未缩放状态下水平滑动超过50px，切换图片
        if (this.scale === 1 && Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
          if (deltaX > 0) {
            this.prevImage(); // 向右滑动，显示上一张
          } else {
            this.nextImage(); // 向左滑动，显示下一张
          }
        }

        this.isDragging = false;
      } else if (e.changedTouches.length === 2) {
        this.isScaling = false;
      }
    },

    // 双指缩放开始
    handlePinchStart(e) {
      // 记录初始距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      this.initialDistance = Math.sqrt(
          Math.pow(touch1.clientX - touch2.clientX, 2) +
          Math.pow(touch1.clientY - touch2.clientY, 2)
      );
      this.lastScale = this.scale;

      // 记录缩放中心点，用于调整平移
      this.scaleCenterX = (touch1.clientX + touch2.clientX) / 2;
      this.scaleCenterY = (touch1.clientY + touch2.clientY) / 2;
      this.lastTranslateX = this.translateX;
      this.lastTranslateY = this.translateY;
    },

    // 双指缩放移动
    handlePinchMove(e) {
      // 计算当前距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      const currentDistance = Math.sqrt(
          Math.pow(touch1.clientX - touch2.clientX, 2) +
          Math.pow(touch1.clientY - touch2.clientY, 2)
      );

      // 计算缩放比例
      const scaleRatio = currentDistance / this.initialDistance;
      const newScale = this.lastScale * scaleRatio;

      // 限制缩放范围
      this.scale = Math.max(0.5, Math.min(5, newScale));

      // 计算缩放中心点
      const currentCenterX = (touch1.clientX + touch2.clientX) / 2;
      const currentCenterY = (touch1.clientY + touch2.clientY) / 2;

      // 调整平移，使缩放中心保持稳定
      const scaleChange = this.scale - this.lastScale;
      this.translateX = this.lastTranslateX + (currentCenterX - this.scaleCenterX) * scaleChange * 0.5;
      this.translateY = this.lastTranslateY + (currentCenterY - this.scaleCenterY) * scaleChange * 0.5;

      // 限制拖拽范围
      this.limitTranslation();
    },

    // 限制拖拽范围
    limitTranslation() {
      // 根据缩放比例计算最大平移范围
      // 缩放越大，允许的平移范围也越大
      const maxTranslate = (this.scale - 1) * 100;

      this.translateX = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateX));
      this.translateY = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateY));
    }
  },
  computed: {
    currentImage() {
      return this.worksList[this.currentImageIndex]?.image || '';
    },
    imageStyle() {
      return {
        transform: `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`,
        transition: this.isDragging || this.isScaling ? 'none' : 'transform 0.2s ease'
      };
    }
  }
}
</script>